---
title: Jekyll에서 마이그레이션하기
description: 기존 Jekyll 프로젝트를 Astro로 마이그레이션하기 위한 팁
type: migration
stub: true
framework: Jekyll
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Jekyll](https://jekyllrb.com)은 Ruby를 기반으로 구축된 정적 사이트 생성기입니다.

## Jekyll과 Astro의 주요 유사점

Jekyll과 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- Jekyll과 Astro는 모두 블로그를 만드는 데 일반적으로 사용되는 정적 사이트 생성기입니다.

- Jekyll과 Astro 모두 [Markdown 및 HTML로 콘텐츠 작성](/ko/guides/content/)을 허용합니다. Jekyll과 Astro는 둘 다 페이지 레이아웃과 미공개 초안 게시물에 대한 몇 가지 특별한 프런트매터 YAML 속성을 제공합니다. Astro에서 기존 Markdown 파일을 계속 사용할 수 있습니다.

- Jekyll과 Astro는 모두 블로그 게시물에서 페이지를 생성하기 위해 [파일 기반 라우팅](/ko/guides/routing/)을 사용합니다. Astro는 [모든 페이지와 게시물을 위한 특수 `src/pages/` 디렉터리](/ko/basics/project-structure/#srcpages)를 제공합니다. Jekyll은 Markdown 블로그 게시물에 `_posts/`라는 유사한 특수 폴더를 사용하지만 사이트 페이지는 다른 곳에 있을 수 있습니다. 새 블로그 게시물을 작성하는 것은 익숙하게 느껴져야 합니다.

## Jekyll과 Astro의 주요 차이점

Astro에서 Jekyll 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다:

- Jekyll은 기본적으로 블로그 플랫폼이므로 Astro에서 직접 구축해야 할 수도 있는 여러 블로그 기능이 내장되어 있습니다. 또는 이러한 기능이 포함된 [블로그 스타터 템플릿 테마](https://astro.build/themes?search=&categories%5B%5D=blog)를 선택하세요. 예를 들어, Jekyll에는 여러 Astro 블로그 테마에서 볼 수 있지만 최소 Astro 프로젝트에는 포함되지 않는 태그와 카테고리에 대한 지원 기능이 내장되어 있습니다.

- Jekyll은 재사용 가능한 레이아웃 요소와 템플릿을 위해 Liquid 템플릿을 사용합니다. Astro는 컴포넌트와 템플릿을 위해 JSX와 유사한 [`.astro` 파일](/ko/basics/astro-components/)을 사용합니다. 모든 `.astro` 파일은 컴포넌트, 레이아웃 또는 전체 페이지일 수 있으며 다른 Astro 컴포넌트를 가져와 렌더링할 수 있습니다. [다른 UI 프레임워크 컴포넌트 (예: React, Svelte, Vue, Solid)](/ko/guides/framework-components/)는 물론 Markdown 또는 MDX와 같은 [프로젝트의 다른 파일](/ko/guides/imports/)에 있는 콘텐츠나 메타데이터를 사용하여 빌드할 수도 있습니다.

## Jekyll에서 아스트로로 전환

Jekyll 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 [테마 쇼케이스](https://astro.build/themes/)에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 `--template` 인수를 `create astro` 명령에 전달할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install/auto/#시작-템플릿)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Markdown 페이지를 생성하기 위해 기존 Markdown 파일을 콘텐츠로 가져와 Liquid 템플릿 대신 [Astro Markdown 레이아웃](/ko/basics/layouts/#markdownmdx-레이아웃)을 사용합니다.

기존 HTML 페이지 콘텐츠의 대부분은 [Astro 페이지](/ko/basics/astro-pages/)로 변환될 수 있으며 추가적으로 [변수, JSX와 유사한 표현식 및 컴포넌트 가져오기를 HTML 템플릿에서 직접 사용](/ko/basics/astro-syntax/#jsx와-유사한-표현식)할 수 있습니다.

Astro에는 자리 표시자를 허용하는 `permalink` 속성이 없습니다. 기존 URL 구조를 유지하려면 [Astro의 페이지 라우팅](/ko/guides/routing/)에 대해 자세히 읽어야 할 수도 있습니다. 또는 [Netlify와 같은 호스트에서 리디렉션을 설정](https://docs.netlify.com/routing/redirects/)하는 것을 고려해보세요.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 [astro.new](https://astro.new)에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 자료

- 블로그 게시물: [Back to the Future: Our Tech Blog's Transition from Jekyll to Astro](https://alasco.tech/2023/09/06/migating-to-astro/).
